<template>
    <!-- 外勤打卡界面 -->
    <div style="padding: 10px;">
        <el-row :gutter="24">
            <el-col :span="2">
                <div class="grid-content ep-bg-purple"><el-button type="primary" size="default" style="width: 100px;"
                        @click="add">添加</el-button>

                </div>
            </el-col>

            <el-col :span="2">
                <div class="grid-content ep-bg-purple">
                </div>
            </el-col>

            <el-col :span="12">
                <div class="grid-content ep-bg-purple">
                </div>
            </el-col>

            <el-col :span="4">
                <div class="grid-content ep-bg-purple-light">
                    <!-- 将搜索输入框与 searchKeyword 响应式变量进行双向绑定 -->
                    <el-input style="width: 180px" size="default" placeholder="搜索数据" v-model="searchKeyword">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <search />
                            </el-icon>
                        </template>
                    </el-input>
                </div>
            </el-col>

            <!-- <el-col :span="1">
                <div class="grid-content ep-bg-purple-light">
                    <a-tooltip content="筛选" position="bottom" background-color="rgb(52, 145, 250)" mini>
                        <el-button size="default" @click="dialog = true"><el-icon>
                                <Filter />
                            </el-icon></el-button>
                    </a-tooltip>
                </div>
            </el-col>

            <el-col :span="1">
                <div class="grid-content ep-bg-purple-light"> <a-tooltip content="排序" position="bottom"
                        background-color="rgb(52, 145, 250)" mini>
                        <el-button size="default" @click=""><el-icon>
                                <Sort />
                            </el-icon></el-button>
                    </a-tooltip>
                </div>
            </el-col> -->


            <el-col :span="2">
                <div class="grid-content ep-bg-purple-light"><a-tooltip content="刷新" position="bottom"
                        background-color="rgb(52, 145, 250)" mini>
                        <el-button size="default" @click=""><el-icon>
                                <Refresh />
                            </el-icon></el-button>
                    </a-tooltip>
                </div>
            </el-col>
            <!--  -->
        </el-row>

        <el-row :gutter="24">
            <el-col :span="24">
                <el-table :data="cardData" style="height: 800px;" scrollbar-always-on
                    @row-click="handleRowClick">
                    <el-table-column v-for="col in card_columns" :prop="col.id" :label="col.label" :width="col.width">
                        <!-- 对补签时间段列单独处理，用 ElTag 渲染 -->
                        <template #default="scope">
                            <template v-if="col.id === 'timeBucket'">
                                <el-tag effect="dark" :type="getTagType(scope.row[col.id])">
                                    {{ scope.row[col.id] }}
                                </el-tag>
                            </template>
                            <template v-if="col.id === 'approvalOpinion'">
                                <el-tag effect="dark" :type="getTagType2(scope.row[col.id])">
                                    {{ scope.row[col.id] }}
                                </el-tag>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                    :page-sizes="[10, 20, 30, 40]" :disabled="disabled" layout="total, sizes, prev, pager, next, jumper"
                    :total="40">
                </el-pagination>
            </el-col>
        </el-row>
    </div>

    <!--筛选  -->
    <el-drawer v-model="dialog" title="筛选" direction="rtl" class="demo-drawer">
        <div class="demo-drawer__content">
            <el-form :model="form" style="height: 600px;">
                <el-select v-model="Screening" placeholder="筛选" style="width: 360px" placement="bottom">
                    <template #label="{ label, value }">
                        <span style="font-weight: bold">{{ label }}</span>
                    </template>
                    <el-option v-for="item in FilterData" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>

            </el-form>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取消</el-button>
                <el-button type="primary" :loading="loading" @click="onClick">
                    {{ loading ? '提交中 ...' : '提交' }}
                </el-button>
            </div>
        </div>
    </el-drawer>

    <!--添加  -->
    <el-dialog align-center title="外勤打卡" v-model="AddDisplay" width="780px">
        <legworkClockIn></legworkClockIn>
    </el-dialog>

    <!-- 详情页面 -->
    <el-dialog align-center :title="selectedRow.name+'-'+selectedRow.department" v-model="dialogVisible" width="780px">
        <legworkClockInDetails :legworkClockInDetails="selectedRow"></legworkClockInDetails>
    </el-dialog>

</template>

<script lang="ts" setup>
import { ref } from 'vue';  // 引入 computed 用于创建计算属性
import legworkClockIn from './legworkClockIn.vue';
import legworkClockInDetails from './legworkClockInDetails.vue';
const isVisible = ref(false) // 详情显示
const loading = ref(false) //抽屉加载
const dialog = ref(false); //抽屉
const currentPage4 = ref(1)// 当前页数
const pageSize4 = ref(10)
const disabled = ref(false)
const total = ref(0)

// 添加搜索关键词响应式变量，用于存储用户输入的搜索内容
const searchKeyword = ref('')

const dialogVisible = ref(false)
const selectedRow = ref({})

const handleRowClick = (row, event, column) => {
    selectedRow.value = row
    dialogVisible.value = true
}

// columns : 表头
const card_columns = ref([
    { id: 'applicationDate', label: '申请日期', width: '200' },
    { id: 'attendanceCycle', label: '归属考勤周期', width: '200' },
    { id: 'name', label: '姓名', width: '200' },
    { id: 'department', label: '所在部门', width: '200' },
    { id: 'workingTime', label: '上班要求时间', width: '200' },
    { id: 'closingTime', label: '下班要求时间', width: '200' },
    { id: 'retroactiveDate', label: '补签日期', width: '200' },
    { id: 'week', label: '星期', width: '200' },
    { id: 'timeBucket', label: '补签时间段', width: '200' },
    { id: 'reason', label: '补签事由说明', width: '200' },
    { id: 'supervisor', label: '直接上级', width: '200' },
    { id: 'approvalTime', label: '审批时间', width: '200' },
    { id: 'approvalOpinion', label: '审批意见', width: '200' },
    { id: 'creator', label: '提交人', width: '200' },
    { id: 'warehousingDate', label: '提交时间', width: '200' },
    { id: 'updateDate', label: '更新时间', width: '200' },
])
// 数据
const cardData = ref([
    {
        applicationDate: '2025-07-09 08:39',
        attendanceCycle: '2025-07',
        name: '贺',
        department: '111',
        workingTime: '2025-07-09 08:30',
        closingTime: '2025-07-09 18:00',
        retroactiveDate: '2025-07-09',
        week: '星期三',
        timeBucket: '下午签退',
        reason: '请假',
        supervisor: '',
        approvalTime: '2025-07-09 08:40',
        approvalOpinion: '不同意',
        creator: '',
        warehousingDate: '',
        updateDate: ''
    },
    {
        applicationDate: '2025-07-11 08:39',
        attendanceCycle: '2025-07',
        name: '贺',
        department: '111',
        workingTime: '2025-07-11 08:30',
        closingTime: '2025-07-11 18:00',
        retroactiveDate: '2025-07-11',
        week: '星期五',
        timeBucket: '上午签到',
        reason: '请假',
        supervisor: '',
        approvalTime: '2025-07-09 08:40',
        approvalOpinion: '同意',
        creator: '',
        warehousingDate: '',
        updateDate: ''
    },
])

// 根据状态返回 Tag 类型
const getTagType = (status) => {
    switch (status) {
        case "上午签到":
            return "success";
        case "下午签退":
            return "primary";
        default:
            return "default";
    }
};

const getTagType2 = (status) => {
    switch (status) {
        case "同意":
            return "success";
        case "不同意":
            return "danger";
        default:
            return "default";
    }
};

// 将搜索关键词转换为小写以实现不区分大小写的搜索
const keyword = searchKeyword.value.toLowerCase()

const form = ref();
const Screening = ref('') //筛选
const FilterData = ref([ //筛选数据
    { value: '全部', label: '全部' },
    { value: '待面试', label: '待面试' },
    { value: '待入职', label: '待入职' },
])
const onClick = () => {//抽屉提交
    loading.value = true
    setTimeout(() => {
        loading.value = false
        dialog.value = false
    }, 400)
}
//抽屉提交取消
const cancelForm = () => {
    loading.value = false
    dialog.value = false
}
// 获取当前数据
const handleClick = (row) => {
    console.log(row)
    isVisible.value = true
}
const AddDisplay = ref(false) // 添加显示
const Initiate = () => { //发起面试关闭
    AddDisplay.value = false
}
const add = () => { //添加
    AddDisplay.value = true

}

</script>

<style scoped></style>